<template>
  <div class="cbody">
    <div style="padding: 10px">
      <el-row :gutter="20" style="margin: 10px">
        <el-col :span="4">
          <el-input v-model="query.ccode" placeholder="单号" />
        </el-col>
        <el-col :span="4">
          <el-input v-model="query.ccusname" placeholder="客户名称" />
        </el-col>
        <el-col :span="5">
          <el-date-picker
            v-model="query.sddate"
            align="right"
            type="date"
            placeholder="选择日期"
          />
        </el-col>
        <el-col :span="5">
          <el-date-picker
            v-model="query.eddate"
            align="right"
            type="date"
            placeholder="选择日期"
          />
        </el-col>
        <el-col :span="3">
          <el-button class="hand-btn" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="page.content"
        tooltip-effect="dark"
        border
        style="width: 100%;"
      >
        <el-table-column
          type="index"
          label="项次"
          width="50"
        />
        <el-table-column
          width="80px"
          prop="measurement"
          label="总检"
        />
        <el-table-column
          prop="mocode"
          label="单号"
        />
        <el-table-column
          prop="moid"
          label="明细单号"
        />
        <el-table-column
          prop="cdepname"
          label="部门名称"
        />
        <el-table-column
          prop="cinvname"
          label="产品名称"
        />
        <el-table-column
          prop="qty"
          label="数量"
        />
        <el-table-column
          prop="ddate"
          label="日期"
        />
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-show="!scope.row.measurement"
              type="text"
              icon="el-icon-edit"
              style="color: #52b0fd"
              @click="selTable(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              style="color: #52b0fd"
              @click="qualityBill(scope.$index, scope.row)"
            >总检</el-button>
            <el-button
              v-show="!scope.row.measurement"
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
            <!--<el-button-->
            <!--type="text"-->
            <!--icon="el-icon-delete"-->
            <!--class="red"-->
            <!--@click="handleDelete(scope.$index, scope.row)"-->
            <!--&gt;免检</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="page.totalElements"
          @current-change="handlePageChange"
        />
      </div>
    </div>
    <!-------------------------------表格 ----------------------top ------------------->
    <!----------------------------------form 表单------------------down----------- -->
    <el-dialog :visible.sync="qualityViible">
      <el-form ref="form" :model="form" label-width="50px">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" />
        </el-form-item>
        <el-form-item label="判定" prop="measurement">
          <el-radio-group v-model="form.measurement">
            <el-radio label="合格">合格</el-radio>
            <el-radio label="特采">特采</el-radio>
            <el-radio label="全检">全检</el-radio>
            <el-radio label="返工">返工</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="text-align:right">
        <el-button class="hand-btn" type="info" @click="qualityViible = !qualityViible">取消</el-button>
        <el-button class="hand-btn" type="success" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>import { query } from '@/api/rpstock'
import { save } from '@/api/rpstock'
import { delbyid } from '@/api/rpstock'
import { get } from '@/api/qmilcode'
export default {
  name: 'RpstockIndex',
  data() {
    return {
      downtests: ['合格', '不合格', '不适用'],
      dialogVisible: false,
      dialogImageUrl: '',
      editVisible: false,
      qualityViible: false,
      filList: [],
      fileURL: process.env.VUE_APP_BASE_API,
      fileUploadURL: process.env.VUE_APP_BASE_API + '/file/upload',
      form: {},
      query: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      page: [],
      grades: [0, 0.25, 0.4, 0.65, 1.0, 1.5, 2.5, 4.0, 6.5, 10, 15, 25],
      levels: ['S-1', 'S-2', 'S-3', 'S-4', 'I', 'II', 'III'],
      options: ['/', '√', '×'],
      datas: []
    }
  },
  created() {
    this.handleSearch()
  },
  methods: {
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'pageIndex', 1)
      this.getData()
    },
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val)
      this.getData()
    },
    getData() {
      query(this.query).then(res => {
        this.page = res.data.page
      })
    },
    selTable(row) {
      this.$router.push({ path: 'rpxunjianEdit', query: { id: row.id }})
    },
    saveEdit() {
      save(this.form).then(res => {
        if (res.code === 200) {
          this.editVisible = false
          this.qualityViible = false
          this.$message.success('保存成功!')
        } else {
          this.$message.error(res.medium)
        }
      })
    },
    qualityBill(index, row) {
      this.qualityViible = true
      this.form = row
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        delbyid(row.id).then(res => {
          this.$message.success('删除成功')
          this.getData()
        })
      })
        .catch(() => {
        })
    },
    changeAqla() {
      if (!this.form.level) {
        this.$message({
          showClose: true,
          message: '请检测质检等级',
          type: 'warning'
        })
        return
      }
      if (!this.form.qty) {
        this.$message({
          showClose: true,
          message: '请先选择单据',
          type: 'warning'
        })
        return
      }
      if (this.form.aqla === 0) {
        this.form.aca = 0
        this.form.rea = 1
      } else {
        const data = { level: this.form.level, qty: this.form.qty, grade: this.form.aqla }
        get(data).then(res => {
          this.form.aca = res.data.data.ac
          this.form.rea = res.data.data.re
          this.form = JSON.parse(JSON.stringify(this.form))
        })
      }
    },
    changeAqlb() {
      if (!this.form.level) {
        this.$message({
          showClose: true,
          message: '请检测质检等级',
          type: 'warning'
        })
        return
      }
      if (!this.form.qty) {
        this.$message({
          showClose: true,
          message: '请先选择单据',
          type: 'warning'
        })
        return
      }
      if (this.form.aqlb === 0) {
        this.form.acb = 0
        this.form.reb = 1
      } else {
        const data = { level: this.form.level, qty: this.form.qty, grade: this.form.aqlb }
        get(data).then(res => {
          this.form.acb = res.data.data.ac
          this.form.reb = res.data.data.re
          this.form = JSON.parse(JSON.stringify(this.form))
        })
      }
    },
    changeAqlc() {
      if (!this.form.level) {
        this.$message({
          showClose: true,
          message: '请检测质检等级',
          type: 'warning'
        })
        return
      }
      if (!this.form.qty) {
        this.$message({
          showClose: true,
          message: '请先选择单据',
          type: 'warning'
        })
        return
      }
      if (this.form.aqlc === 0) {
        this.form.acc = 0
        this.form.rec = 1
      } else {
        const data = { level: this.form.level, qty: this.form.qty, grade: this.form.aqlc }
        get(data).then(res => {
          this.form.acc = res.data.data.ac
          this.form.rec = res.data.data.re
          this.form = JSON.parse(JSON.stringify(this.form))
        })
      }
    },
    changeLevel() {
      if (this.form.aqla) {
        this.changeAqla()
      }
      if (this.form.aqlb) {
        this.changeAqlb()
      }
      if (this.form.aqlc) {
        this.changeAqlc()
      }
    },
    handleRemove(file, fileList) {
      const images = []
      for (const image of fileList) {
        if (image.response) {
          images.push({ imgUrl: image.response.data.data })
        } else {
          images.push({ imgUrl: image.url.replace(this.fileURL, '') })
        }
      }
      this.form.images = images
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleExceed() {
      this.$message({
        showClose: true,
        message: '超出限定图片上传个数',
        type: 'error'
      })
    },
    handleUploadSuccess(res, file, fileList) {
      const images = []
      for (const image of fileList) {
        if (image.response) {
          images.push({ imgUrl: image.response.data.data })
        } else {
          images.push({ imgUrl: image.url.replace(this.fileURL, '') })
        }
      }
      this.form.images = images
    }
  }
}
</script>

<style scoped="css">
  .cbody{
    background-color: #fcfcfc;
  }
  select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
  }
  .content{
    margin: 5px auto;
    width: 900px;
    padding: 20px;
    font-size: 14px;
    font-weight: 400;
    background-color: #f7f7f7;
    text-align: center;
  }
  .topth{
    width: 100px;
  }
  .condiv{
    text-align: left;
    border-width: thin;
    border-color: #c7c7c7;
    border-style: solid;
  }
  .table{
    border-collapse: collapse;
    border-color: #c7c7c7;
  }
  .lditem{
    margin: 15px 0;
  }
  .wditem{
    margin: 0 15px;
  }
  .uspan{
    margin: 0 5px;
  }
  .mditem{
    margin: 0 8px;
  }
  .minp{
    width: 50px;
  }
  td{
    border-style: solid;
    border-width: thin;
    border-color: #c7c7c7;
  }
  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .table {
    width: 100%;
  }
  .mincell{
    width: 20px;
  }
  col2{
    colspan:2
  }
  .cselect{
    height: 20px;
    width: 100%;
    text-align: center;
    border-width: 0;
    background-color: #ffffff;
    font-weight: bold;
  }
  th{
    border-style: solid;
    border-width: thin;
    font-weight: 400;
    border-color: #c7c7c7;
  }
  .cnumber{
    width: 90px;
  }
  .ditem{
    padding: 20px;
    display: flex;
    justify-content: space-between;
  }
  .red {
    color: #ff0000;
  }
  .hand-btn {
    margin: 5px;
  }
  .gaoya{
    padding-left: 10px;
  }
</style>
